<template>
  <div style="background-color: white">
    <!--添加按钮 -->
    <el-button style="margin-left: 15px; margin-bottom: 10px; margin-top: 10px" plain @click="openDialogForAdd">
      添加角色
    </el-button>

    <el-table
        :data="tableData"
        style="width: 100%"
        border
        row-key="id"
        default-expand-all
    >
      <el-table-column prop="sysCode" label="归属系统"/>
      <el-table-column prop="menuCode" label="菜单编码"/>
      <el-table-column prop="menuName" label="菜单名称"/>
      <el-table-column prop="menuType" label="菜单类型"/>
      <el-table-column prop="menuRoute" label="菜单路由"/>
      <el-table-column prop="routeType" label="路由类型"/>
      <el-table-column prop="menuIcon" label="菜单图标"/>
      <!-- 编辑删除按钮-->
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="openDialogForUpdate(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- dialog MenuManageEdit页面 标题从编辑按钮来展示编辑菜单 从添加按钮来展示添加菜单 -->
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="500"
        :before-close="handleClose"
    >
      <!-- 编辑时，将编辑的menuId传递给MenuManageEdit -->

      <MenuManageEdit :menuCode="currentMenuCode" :isAdd="isAdd"/>
    </el-dialog>
  </div>


</template>
<script lang="ts" setup>
// dialogVisible = true
import {onMounted, ref} from "vue";
import MenuManageEdit from "./RoleManageEdit.vue";
import {QueryMenuApi} from "../../apis/api.ts";

const dialogVisible = ref(false)
const isAdd = ref(true)
const currentMenuCode = ref({})
const title = ref(isAdd.value ? "添加角色" : "编辑角色")

const openDialogForAdd = () => {
  isAdd.value = true
  dialogVisible.value = true
  currentMenuCode.value = {}
}

const openDialogForUpdate = (row: any) => {
  isAdd.value = false
  dialogVisible.value = true
  currentMenuCode.value = row.menuCode
}

const queryMenuTables = () => {
  QueryMenuApi().then((resp) => {
    console.log(resp)
  })
}

onMounted(() => {
  queryMenuTables()
})

</script>